<%@ include file="/common/taglibs.jsp"%>

<style type="text/css">
	.name{font-size:11px;word-wrap:break-word}
</style>

<script>
function showPostUrComment(){
	$("#commentLink").hide();
	$("#postUrComment").show();
}
</script>

<div style="margin-bottom:10px;height:45px;">
	<ul class="glassList" style="float:right;">
	    <li>
	    	<a class="button-green"  href="<c:url value='/showMyBlogList'/>">Blogs</a> 
	    </li>
	</ul>
</div>
<div>
	<div align="left" style="padding-left:5px;margin-bottom:10px;"></span></div>
	<div style="min-height:150px;margin-bottom: 20px;border-radius: 5px 5px 5px 5px; border: 1px solid lightGray; box-shadow: 4px 5px 5px -4px #AAAAAA;">
			<div align="left" id="userInfo" style="float:left;padding-left:5px;padding-top:8px;margin-right:10px;">
				<div id="userImg"><img src="/images/cip/user/default/user.jpg" width="50px" height="50px"/> </div>
				<div id="userName" class="name"><s:property value="blog.user.firstName"/><s:property value="blog.user.lastNsame"/></div> 
			</div>
			<div id="blogInfo">
				<div align="left" style="padding:5px;font-weight:bold;color:#555;"><s:property value="blog.title"/></div>
				<div align="left" style="padding-left:20px;"><s:property value="blog.content" /></div>
			</div>
	</div> 
	<div align="left" class="titleBG" style="margin-bottom:10px;"><span style="font-size:15px;"><b>Comments: </b></span></div>
	<div align="left">
		<div id="commentLink" style="display:block;"><span style="font-size:12px;"><a href="javascript:showPostUrComment();">Click here</a> to post your comment</span></div>
		<div id="postUrComment" style="display:none;">
		<s:form name="comments" action="saveOrUpdateComments" method="post" validate="true">
		 <table border="0">
			<tr>
				<td><span style="font-size:12px;">Post your comment&nbsp;&nbsp;</span></td>
				<td>
					<textarea  name="comments.comment" id="saveOrUpdateComments_comment" tabindex="2" cols="40" rows="5" ></textarea>
				</td>
			</tr>
			<tr>
				<td colspan="2" align="right">
					<table>
						<tr>
							<td>
								<input type="submit" value="Submit" id="saveOrUpdateComments_0" onSubmit="">
							</td>
							<td>
								<s:submit key="button.cancel" method="cancel" />
							</td>
						</tr>
					</table>
				</td>
			</tr>	
		</table>
		<s:hidden id="id" name="blog.id"></s:hidden>	
		</s:form>
		</div>
	</div>
	<div align="left" id="commentsList">
		<s:iterator value="commentsList" status="rowstatus">
			<div style="margin:7px;margin-bottom:10px;border-radius: 5px 5px 5px 5px; border: 1px solid lightGray; box-shadow: 4px 5px 5px -4px #AAAAAA;">
			<div align="left" id="commenterInfo" style="float:left;padding-left:5px;padding-top:8px;margin-right:10px;">
				<div id="commenterImg"><img src="/images/cip/user/default/user.jpg" width="35px" height="35px"/> </div>
				<div id="commenterName" style="font-size:11px;"><s:property value="user.username"/></div> 
			</div>
			<div id="commentInfo">
				<div align="left" style="padding-left:20px;height:60px;font-size:13px;"><s:property value="comment"/></div>
			</div>
			</div>
		</s:iterator>
	</div>
</div>
